
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <style>
        #body {
            position: absolute;
            bottom: 15px;
        }
    </style>
</head>
<body id="body">

<div id="msg_log">

</div>
<hr>
<div class="input">
昵称：{{ username }}<br>
内容：<input type="text" id="msg">
<input type="submit" value="发送" id="send">
</div>

<script type="application/javascript" src="{{static_url('jquery-3.3.1.min.js')}}"></script>

<script type="application/javascript">


    $(document).ready(function () {
        let url = 'ws://127.0.0.1:8001/ws';
        let ws = new WebSocket(url);
        ws.onmessage = function (event) {
            let msg = JSON.parse(event.data);
            let node = $(msg.html);
                node.hide();
            $("#msg_log").append(node);
                node.slideDown()

            console.log(msg)
        };
        $("#send").click(function () {
            let msg = {"username": "", "content": ""};
            msg["content"] = $("#msg").val();
            ws.send(JSON.stringify(msg));
            $("#msg").val("")
        });
        $("#msg").on('keypress', function (e) {
            if (e.keyCode=='13')
                    {
                    let msg = {"username": "", "content": ""};
                    msg["content"] = $("#msg").val();
                    ws.send(JSON.stringify(msg));
                    $("#msg").val("")
                    }
        })
    });
</script>

</body>
</html>